<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>人员管理</title>

  <!--data table-->
  <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->

  <style type="text/css">
    #all_light { /*整个弹窗的页面*/
    opacity: 0.8; /*透明度*/
    width: 100%; /*宽度*/
    height: 2300px; /*高度，不能百分百*/
    background: #000; /*背景色*/
    position: absolute;
    top: 0;
    left: 0; /*定位*/
    display: none; /*隐藏*/
    z-index: 2; /*覆盖*/
    }
    #contes { /* 弹框的页面*/
    width: 500px; /*宽度*/
    height: 500px; /*高度*/
    background: #fff; /*背景色*/
    display: none; /*隐藏*/
    z-index: 2; /*覆盖*/
    position: absolute;
    top: 100px;
    left: 400px; /* 定位*/
    }
    input{
    margin-bottom: 10px;
    }
    </style>


</head>

<body class="sticky-header">
<div id="app">
<section>
    <!-- left side start-->
    <script src="left.js"></script>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

        <!--toggle button start-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>
        <!--toggle button end-->


        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                人员管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">管理</a>
                </li>
                <li class="active"> 人员管理 </li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
             <div class="row">
                <div class="col-sm-12">
                <section class="panel">

                <div class="panel-body">
                <div class="adv-table editable-table ">
                <div class="clearfix">
                    <div class="btn-group">
                        <button id="editable-sample_new" class="btn btn-primary"
                        onclick="addUser()">
                            添加新成员 <i class="fa fa-plus"></i>
                        </button>
                    </div>
                    <div class="btn-group pull-right">
                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tools <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">Print</a></li>
                            <li><a href="#">Save as PDF</a></li>
                            <li><a href="#">Export to Excel</a></li>
                        </ul>
                    </div>
                </div>
                <div class="space15"></div>

<!--  弹框的div -->
<div id="contes" style="">
    <div style="width:500px;height:40px;">
    
    <hr>
    <form style=" margin-left: 100px;" id="dataform">
        <input type="hidden" id="id" name="id">
       人员权限  :  <input type="text" value="" id="sault" name="sault" ><br>
       登录名  :  <input type="text" value="" id="username" name="username" ><br>
       人员姓名  :  <input type="text" value="" id="name"  name="name" ><br>
       人员密码  :  <input type="password" value="" id="password"  name="password"><br>
       人员年龄  :  <input type="text" value="" id="age"  name="age" ><br>
       邮箱地址  :  <input type="text" value="" id="email"  name="email" ><br>
       手机号码  :  <input type="text" value="" id="phone"  name="phone" ><br>
       人员工资  :  <input type="text" value="" id="salary"  name="salary" ><br>

  
    <button type="submit" onclick="submitform()">提交</button>
    <button type="button" onclick="cancel()">取消</button>
    </form>
    </div>
   </div>
   <div id="all_light">
   </div>

                <!-- 表格 -->
                <table class="table table-striped table-hover table-bordered"
                       id="editable-sample">
                <thead>
                <tr>
                    <th prop="id">人员id</th>
                    <th prop="sault">人员权限</th>
                    <th prop="username">登录名</th>
                    <th prop="name">人员姓名</th>
                    <th prop="password">人员密码</th>
                    <th prop="age">人员年龄</th>
                    <th prop="email" >邮箱地址</th>
                    <th prop="phone">手机号码</th>
                    <th prop="salary">人员工资</th>
                    <th>修改</th>
                    <th>删除</th>
                </tr>
                </thead>

                <tbody id="newList">
                
                </tbody>
                </table>
                </div>
                
                </div>
                <div col-lg-6>
                    
                    <div class="dataTables_paginate paging_bootstrap pagination">
                        
                <ul id="pagination">
                   
                </ul>
            </div>
                </div>
                </section>
                </div>
                </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
       
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>
</div>
<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<!--script for editable table-->
<script src="js/editable-table.js"></script>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<!-- END JAVASCRIPTS -->
<!--初始化权限-->
<script src="orders.js"></script>
<!--初始化权限-->
<script>
    window.onload=function (){
        var order;
        $.ajax({
            url:"/users/getOrder",
            type:"get",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                order=res;
                if(order==2){
                    order2();
                }
                if(order==3){
                    order3();
                }
            },
            error:function (){

            }
        })

        load();
    }
    var pagination={ //分页信息
            currentPage:1,
            pageSize:5,
            totalPage:10
        }
        //数据列表

    var list=[]

// 弹窗start
function cancel(){
    document.getElementById('contes').style.display = 'none';
}
function jump() {
    
 document.getElementById('all_light');
 document.getElementById('contes').style.display = 'block';
 }
 //弹窗end

//提交修改
function submitform(){
        var serialize = $("#dataform").serializeArray();
        var id=serialize[0].value;
        var sault=serialize[1].value;
        var username=serialize[2].value;
        var name=serialize[3].value;
        var password=serialize[4].value;
        var age=serialize[5].value;
        var email=serialize[6].value;
        var phone=serialize[7].value;
        var salary=serialize[8].value;
    $.ajax({ //更新和添加用同一个接口即可
        url:"/users/Update",
        type:"POST",
        data: '{"id":"'+id+'",' +
            '"sault":"'+sault+'",' +
            '"username":"'+username+'",' +
            '"name":"'+name+'",' +
            '"password":"'+password+'",' +
            '"age":"'+age+'",' +
            '"email":"'+email+'",' +
            '"phone":"'+phone+'",' +
            '"salary":"'+salary+'"}',
        contentType:"application/json;charset=UTF8",
        dataType:"json",
        success:function (res){
            if (res.success){
                alert(res.msg);
            }
            else{
                alert("操作失败!")
            }
        },
        error:function (){
            alert("莫名错误")
        }
    })
        
}

 //添加人员
 function addUser(){
    $("#dataform")[0].reset();
     $("#id").val(0);
     jump();
 }

    //修改人员
    function edit(id){
        $.ajax({
            url:"/users/getUserById/"+id,
            type:"GET",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                if (res.success){
                    var user=res.data
                    $("#id").val(user.id);
                    $("#sault").val(user.sault);
                    $("#username").val(user.username);
                    $("#name").val(user.name);
                    $("#password").val(user.password);
                    $("#age").val(user.age);
                    $("#email").val(user.email);
                    $("#phone").val(user.phone);
                    $("#salary").val(user.salary);
                }
                else{
                    alert("查询失败!")
                }
            },
            error:function (){

            }
        })

        jump();
    }

    //删除人员
    function delU(id) {

        $.ajax({
            url:"/users/delById/"+id,
            type:"GET",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                if (res.success){
                    alert("删除成功!")
                }
                else{
                    alert("删除失败!")
                }
            },
            error:function (){

            }
        })
    }
    //展示列表
    function showList(list,sum,index){
        $('#newList').empty();
        for(var i=0;i<list.length;i++) {
            var user={
                id:list[i].id,
                sault:list[i].sault,
                username:list[i].username,
                name:list[i].name,
                password:list[i].password,
                age:list[i].age,
                email:list[i].email,
                phone:list[i].phone,
                salary:list[i].salary
            }
            var tr="<tr>\n" +
                "<td>"+list[i].id+"</td>\n" +
                "<td>"+list[i].sault+"</td>\n" +
                "<td>"+list[i].username+"</td>\n" +
                "<td>"+list[i].name+"</td>\n" +
                "<td>"+list[i].password+"</td>\n" +
                "<td>"+list[i].age+"</td>\n" +
                "<td>"+list[i].email+"</td>\n" +
                "<td>"+list[i].phone+"</td>\n" +
                "<td>"+list[i].salary+"</td>\n" +
                "<td><button  onclick=\"edit("+list[i].id+")\">修改</button></td>\n" +
                "<td><button  onclick=\"delU("+list[i].id+")\">删除</button></td>\n" +
                "</tr>"
            $("#newList").append(tr);
        }

        $('#pagination').empty();
        for(var i=1;i<=sum;i++){
            if(i==index)var li="<li><button style='color: red' onclick=\"gopage("+i+")\">"+i+"</button></li>";
            else var li="<li><button onclick=\"gopage("+i+")\">"+i+"</button></li>";
            $("#pagination").append(li);
        }
    }

    //去xx页面
    function gopage(i){
        // $('#newList').empty();
        pagination.currentPage=i;//修改当前页码
        $.ajax({
            url:"/users/getList",
            type:"POST",
            data:'{"currentPage":"'+pagination.currentPage+'","pageSize":"'+pagination.pageSize+'"}',
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                if (res.success){
                    var l=res.data.list//重新赋值
                    var sum=res.data.totalPage;//更新总页数
                    showList(l,sum,i)
                }
                else{
                    alert("查询失败!")
                }
            },
            error:function (){

            }
        })


    }
    function load(){
                gopage(1);

    }    
    
            
        
    
</script>

</body>
</html>
